<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">



  <meta name="description" content="六一任务---留言板"/>




  <meta name="keywords" content="flask, Mysql, python, 八一" />



  <meta name="baidu-site-verification" content="HhUstaSjr0" />



  <meta name="google-site-verification" content="UA-102975942-1" />






  <link rel="alternate" href="/atom.xml" title="八一">




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=2.6.0" />



<link rel="canonical" href="https://bay1.top/2017/06/02/六一任务-留言板/"/>


<link rel="stylesheet" type="text/css" href="/css/style.css?v=2.6.0" />
<link rel="stylesheet" type="text/css" href="/css/prettify.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/sons-of-obsidian.css" media="screen" />



  <link rel="stylesheet" type="text/css" href="/lib/fancybox/jquery.fancybox.css" />




  
  <script id="baidu_analytics">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?9a885cc9fb6cd7bcef579deb8efe8a70";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  <script id="google_analytics">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-102975942-1', 'auto');
        ga('send', 'pageview');
  </script>










    <title> 六一任务---留言板 - 八一 </title>
  </head>

  <body><div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/." class="logo">八一</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    
      <a href="/archives">
        <li class="mobile-menu-item">
          
          
            文章
          
        </li>
      </a>
    
      <a href="/tags">
        <li class="mobile-menu-item">
          
          
            标签
          
        </li>
      </a>
    
      <a href="/about">
        <li class="mobile-menu-item">
          
          
            关于/友链
          
        </li>
      </a>
    
      <a href="/search">
        <li class="mobile-menu-item">
          
          
            站内搜索
          
        </li>
      </a>
    
  </ul>
</nav>

    <div class="container" id="mobile-panel">
      <header id="header" class="header"><div class="logo-wrapper">
  <a href="/." class="logo">八一</a>
</div>

<nav class="site-navbar">
  
    <ul id="menu" class="menu">
      
        <li class="menu-item">
          <a class="menu-item-link" href="/archives">
            
            
              文章
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/tags">
            
            
              标签
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/about">
            
            
              关于/友链
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/search">
            
            
              站内搜索
            
          </a>
        </li>
      
    </ul>
  
</nav>

      </header>

      <main id="main" class="main">
        <div class="content-wrapper">
          <div id="content" class="content">
            
  
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          六一任务---留言板
        
      </h1>

      <div class="post-meta">
        <span class="post-time">
          2017-06-02
        </span>
        
        
        
      </div>
    </header>

    
    
  <div class="post-toc" id="post-toc">
    <h2 class="post-toc-title">文章目录</h2>
    <div class="post-toc-content">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#数据库的连接"><span class="toc-text">数据库的连接</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#用户登录注册"><span class="toc-text">用户登录注册</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#时间获取和数据库表示"><span class="toc-text">时间获取和数据库表示</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#获取全部留言并返回"><span class="toc-text">获取全部留言并返回</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#小结"><span class="toc-text">小结</span></a></li></ol>
    </div>
  </div>


    <div class="post-content">
      
        <p>老组长说：果然有deadline比较有效率。。。。。</p>
<p>半模仿半修改终于搞好了这个小任务 <a id="more"></a></p>
<p><a href="https://github.com/bayi27/MessageBoard" target="_blank" rel="noopener">源码</a></p>
<h2 id="数据库的连接"><a href="#数据库的连接" class="headerlink" title="数据库的连接"></a>数据库的连接</h2><blockquote>
<p>这次使用的是数据库的直连,没有用SQLAlchemy，感觉这种方式也很方便</p>
</blockquote>
<figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">mysql = MySQL()</span><br><span class="line">app.config[<span class="string">'MYSQL_DATABASE_USER'</span>] = <span class="string">'mysql用户'</span></span><br><span class="line">app.config[<span class="string">'MYSQL_DATABASE_PASSWORD'</span>] = <span class="string">'密码'</span></span><br><span class="line">app.config[<span class="string">'MYSQL_DATABASE_DB'</span>] = <span class="string">'数据库名'</span></span><br><span class="line">app.config[<span class="string">'MYSQL_DATABASE_HOST'</span>] = <span class="string">'localhost'</span></span><br><span class="line">mysql.init_app(app)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>想用数据库的时候</p>
</blockquote>
<figure class="highlight makefile"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">con = mysql.connect()</span><br><span class="line">cursor = con.cursor()</span><br><span class="line">sql=<span class="string">"select user_password from tbl_user where user_name='%s'"</span>%_username <span class="comment">#要用的数据库语句</span></span><br><span class="line">cursor.execute(sql) <span class="comment">#运行语句</span></span><br><span class="line">data = cursor.fetchall() <span class="comment">#获取数据</span></span><br></pre></td></tr></table></figure>
<h2 id="用户登录注册"><a href="#用户登录注册" class="headerlink" title="用户登录注册"></a>用户登录注册</h2><blockquote>
<p>注册时候储存密码可以用<a href="http://flask.pocoo.org/snippets/54/" target="_blank" rel="noopener">Salted Passwords</a></p>
</blockquote>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">generate_password_hash(_password) <span class="comment">#加密函数</span></span><br><span class="line"></span><br><span class="line">check_password_hash(</span><br><span class="line">密码hash,_password) <span class="comment">#验证码密码函数</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>查询的数据库数据可以用json返回，然后利用json进行html构造并显示在前端<br>留言内容的返回也是类似的方法</p>
</blockquote>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">var signupObj = JSON.parse(response); <span class="comment">#解析后端返回的数据</span></span><br><span class="line">var signup= document.getElementById(<span class="string">"resul"</span>); <span class="comment">#选择html中id为resul</span></span><br><span class="line">var p= document.createElement(<span class="string">"p"</span>); <span class="comment">#生成新的语句p标签</span></span><br><span class="line">p.setAttribute(<span class="string">"style"</span>,<span class="string">"color:#8E8E8E"</span>); <span class="comment">#增加样式</span></span><br><span class="line">p.innerHTML = signupObj.result;  <span class="comment">#标签里插入解析的数据</span></span><br><span class="line">signup.appendChild(p); <span class="comment">#赋给html中id值为resul的</span></span><br><span class="line">setTimeout(function()&#123;  </span><br><span class="line">window.location.reload();</span><br><span class="line">&#125;,<span class="number">850</span>); <span class="comment">#几秒后刷新</span></span><br></pre></td></tr></table></figure>
<h2 id="时间获取和数据库表示"><a href="#时间获取和数据库表示" class="headerlink" title="时间获取和数据库表示"></a>时间获取和数据库表示</h2><blockquote>
<p>python获取时间的方法很多，具体可以百度<br>我用的time库，利用下面的语句可以直接获取当前时间</p>
</blockquote>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">atime=time.strftime(<span class="string">'%Y-%m-%d %H:%M:%S'</span>)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>在数据库中，时间字段的类型设置</p>
</blockquote>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">`words_date` datetime DEFAULT NULL,</span><br></pre></td></tr></table></figure>
<h2 id="获取全部留言并返回"><a href="#获取全部留言并返回" class="headerlink" title="获取全部留言并返回"></a>获取全部留言并返回</h2><blockquote>
<p>思路就是在数据库中查询留言表单，放到一个字典中，返回的js，再解析就好了<a href="http://jquery.com/" target="_blank" rel="noopener">jquery</a></p>
</blockquote>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">words_dict = []</span><br><span class="line"><span class="keyword">for</span> word <span class="keyword">in</span> result:</span><br><span class="line">word_dict = &#123;</span><br><span class="line">        <span class="string">'Id'</span>: word[<span class="number">3</span>],</span><br><span class="line">        <span class="string">'Title'</span>: word[<span class="number">1</span>],</span><br><span class="line">        <span class="string">'Description'</span>: word[<span class="number">2</span>],</span><br><span class="line">        <span class="string">'Time'</span>:word[<span class="number">4</span>]</span><br><span class="line">	&#125;</span><br><span class="line">words_dict.append(word_dict)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>前端的代码，这段js可是费了我好大的劲，写的不好，但是能用。。。。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">success: <span class="function"><span class="keyword">function</span>(<span class="params">res</span>)</span>&#123;</span><br><span class="line">				<span class="keyword">var</span> div1 = $(<span class="string">'&lt;div&gt;'</span>)</span><br><span class="line">				.attr(<span class="string">'class'</span>, <span class="string">'comment-author vcard'</span>)</span><br><span class="line">				.append($(<span class="string">'&lt;b&gt;'</span>)</span><br><span class="line">					.attr(<span class="string">'class'</span>,<span class="string">'fn'</span>),</span><br><span class="line">							$(<span class="string">'&lt;span&gt;'</span>)</span><br><span class="line">							.attr(<span class="string">'class'</span>, <span class="string">'says'</span>));</span><br><span class="line">				<span class="keyword">var</span> div2 = $(<span class="string">'&lt;div&gt;'</span>)</span><br><span class="line">				.attr(<span class="string">'class'</span>, <span class="string">'comment-metadata'</span>)</span><br><span class="line">				.append($(<span class="string">'&lt;time&gt;'</span>)</span><br><span class="line">					.attr(<span class="string">'datetime'</span>,<span class="string">'2017-05-05T18:56:06+00:00'</span>));</span><br><span class="line">				<span class="keyword">var</span> div3 = $(<span class="string">'&lt;div&gt;'</span>)</span><br><span class="line">				.attr(<span class="string">'class'</span>, <span class="string">'comment-content'</span>)</span><br><span class="line">				.append($(<span class="string">'&lt;b&gt;'</span>)</span><br><span class="line">					.attr(<span class="string">'class'</span>,<span class="string">'fn'</span>),</span><br><span class="line">					$(<span class="string">'&lt;p&gt;'</span>));				</span><br><span class="line">				<span class="keyword">var</span> wordsObj = <span class="built_in">JSON</span>.parse(res);</span><br><span class="line">				<span class="keyword">var</span> words1= <span class="string">''</span>;</span><br><span class="line">				<span class="keyword">var</span> words2= <span class="string">''</span>;</span><br><span class="line">				<span class="keyword">var</span> words3= <span class="string">''</span>;</span><br><span class="line">				$.each(wordsObj,<span class="function"><span class="keyword">function</span>(<span class="params">index, value</span>)</span>&#123;</span><br><span class="line">					words1= $(div1).clone();</span><br><span class="line">					words2= $(div2).clone();</span><br><span class="line">					words3= $(div3).clone();</span><br><span class="line">					$(words1).find(<span class="string">'b'</span>).text(value.Id);</span><br><span class="line">					$(words1).find(<span class="string">'span'</span>).text(<span class="string">"说:"</span>);</span><br><span class="line">					$(words2).find(<span class="string">'time'</span>).text(value.Time);</span><br><span class="line">					$(words3).find(<span class="string">'b'</span>).text(value.Title);</span><br><span class="line">					$(words3).find(<span class="string">'p'</span>).text(value.Description);</span><br><span class="line">					$(<span class="string">'.comment-body'</span>).append(words1).append(words2).append(words3);</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;,</span><br></pre></td></tr></table></figure>
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><blockquote>
<p>整个过程我涨的姿势，真是一大波。。。。<br>特别是前端js的，也同时深深感觉到，革命成功尚且远<br>而且功夫不负有心人的，有了bug或者不能实现的地方，就四处问人，查查资料，一般都能够解决掉的</p>
</blockquote>

      
    </div>

    
      
      



      
      
    

    
      <footer class="post-footer">
        
          <div class="post-tags">
            
              <a href="/tags/flask/">flask</a>
            
              <a href="/tags/Mysql/">Mysql</a>
            
              <a href="/tags/python/">python</a>
            
          </div>
        
        
        
  <nav class="post-nav">
    
      <a class="prev" href="/2017/06/05/吐血的部署/">
        <i class="iconfont icon-left"></i>
        <span class="prev-text nav-default">吐血的部署</span>
        <span class="prev-text nav-mobile">上一篇</span>
      </a>
    
    
      <a class="next" href="/2017/05/31/Hexo可视化编写相关设置/">
        <span class="next-text nav-default">Hexo可视化编写和文章加密设置</span>
        <span class="prev-text nav-mobile">下一篇</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

      </footer>
    

  </article>


          </div>
          
  <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div> 
    </div>
  </div>


        </div>
      </main>

      <footer id="footer" class="footer">

  <div class="social-links">
    
      
        
          <a href="https://github.com/bay1" class="iconfont icon-github" title="github"></a>
        
      
    
      
        
          <a href="http://weibo.com/3190704711/profile?topnav=1&wvr=6&is_all=1" class="iconfont icon-weibo" title="weibo"></a>
        
      
    
      
    
      
    
      
    
    
    
  </div>


<div class="copyright">
  <span class="copyright-year">
    
    &copy; 
     
      2016 - 
    
    2018
    <span class="author">bay1</span>
  </span>
</div>
      </footer>

      <div class="back-to-top" id="back-to-top">
        <i class="iconfont icon-up"></i>
      </div>
    </div>

    
  
  <script type="text/javascript">
    var disqus_config = function () {
        this.page.url = 'https://bay1.top/2017/06/02/六一任务-留言板/';
        this.page.identifier = '2017/06/02/六一任务-留言板/';
        this.page.title = '六一任务---留言板';
    };
    (function() {
    var d = document, s = d.createElement('script');

    s.src = '//https-blog-flywinky-top-1.disqus.com/embed.js';

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();  
  </script>



    
  





  
    <script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
  

  
    <script type="text/javascript" src="/lib/slideout/slideout.js"></script>
  

  
    <script type="text/javascript" src="/lib/fancybox/jquery.fancybox.pack.js"></script>
  


    <script type="text/javascript" src="/js/src/even.js?v=2.6.0"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=2.6.0"></script>
<script src="/js/prettify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('pre').addClass('prettyprint');
   prettyPrint();
 })
</script>
  </body>
</html>
